import React, { Component  } from 'react';
import CoursePage from './coursePage';
import ImageMaker from './ImageMaker';


export default class MainPage extends Component {
	constructor(props) {
		super(props)
		this.state = {
			isCoursePage: true,
			courseJson: {}
		}
	}


	componentDidMount() {
		window.addEventListener('message', this.getPage);
	}

	componentWillUnmount() {
		window.removeEventListener('message', this.getPage);
	}
	
	getPage = event => {
		const message = event.data; // The JSON data our extension sent
		if(message.command !== 'load' && message.command !== 'run'){
			console.log(message)
		}else{
			if(message.command === 'load'){
				this.setState({
					isCoursePage: true
				})
			}else{
				this.setState({
					isCoursePage: false
				})
			}
			//读取数据
			let courseJson = message.data
			this.setState({
				courseJson: {
					...courseJson
				}
			})
			
			
		}
	}

	render() {
		const {isCoursePage, courseJson} = this.state
		return (
			<>
			{
				isCoursePage ? (
					<CoursePage />
				) : (
					<ImageMaker courseJson={courseJson}/>
				)
			}
			</>
		)

	}
}